<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags"%>

<%@ taglib uri="/WEB-INF/hexacta.tld" prefix="hexacta"%>

<head>
<sx:head cache="true" />
<link rel="stylesheet" href="/hrs-intranet/styles/displaytag.css"
	type="text/css" />
</head>

<script type="text/javascript">
	function clickOK() {
		document.getElementById('okbtn').click();
	}

	function Func1Delay()
	{
		setTimeout("clickOK()", 100);
	}

	function confirmDeleteReq( url, id )
	{
		if ( confirm("You are about to remove the requirement. Are you sure you want to continue?") )
		{
			document.getElementById('requirementToDelete').value = id;
			document.forms[0].action = url;
	  		document.forms[0].submit();
		}
	}

	dojo.event.topic.subscribe("/ProyectoSeleccionado", function(value, key, text, widget){
		llamarAction();
	});

	function llamarAction(){
		if(dojo.widget.byId("projectsList").getText() != ""){
			document.getElementById('proyectoSeleccionado').click();
		}
	}
</script>

<s:form cssClass="formClass">
	<s:url var="edit_action" action="RequirementAction_editRequirement"
		namespace="/hrs2" />
	<s:url var="remove_action" action="RequirementAction_removeRequirement"
		namespace="/hrs2" />
	<s:hidden name="requirementToDelete" id="requirementToDelete" />
	<sx:autocompleter id="projectsList" list="projectsList"
		listValue="name" searchType="startword" listKey="id"
		showDownArrow="false" keyName="selectedProjectId"
		name="selectedProjectName" valueNotifyTopics="/ProyectoSeleccionado"
		label="Project" />
	<s:submit id="proyectoSeleccionado"
		action="RequirementAction_projectSelected"
		cssStyle="visibility: hidden" />

	<s:if test="%{selectedProjectId != null}">
	
		<table width="70%" bgcolor="#f0f0f0" style="border-bottom:1px solid #ffffff">
			<tr>
				<td>
					<table>
						<tr>
							<td width="60px" valign="middle" style="font-family:Arial,sans-serif; font-size:11px; color:#000000">
							Start Date:
							
							</td>
							<td>
								<sx:datetimepicker id="startDate" name="selectedStartDate"
								displayFormat="dd/MM/yyyy" />	
							</td>
						</tr>
					</table>			
				</td> 
				
				<td>
					<table>
						<tr>
							<td width="60px" valign="middle" style="font-family:Arial,sans-serif; font-size:11px; color:#000000">
							End Date:
							</td>
							<td>
								<sx:datetimepicker id="endDate" name="selectedEndDate"
								displayFormat="dd/MM/yyyy" />
							</td>
						</tr>
					</table>
				</td>
				<td width="45%"></td>
			</tr>
			</table>
			
			<table width="70%" bgcolor="#f0f0f0">			
				<tr>
					<td width="60px" style="padding-left:6px;font-family:Arial,sans-serif; font-size:11px; color:#000000">
							Roles:
					</td>
					
					<td width="300px" align="left">
						<s:select value="selectedRolesBefore" size="10" 
						name="selectedRoles" list="roles" listKey="code"
						listValue="description" multiple="true"
						title="Using Crtl, you can select multiple options. If no option is selected, all the roles will be shown"
						cssStyle="margin-top:-15px; position:relative; border:1px solid #cccccc "/>
					</td>
					<td>
						<s:submit action="RequirementAction_filterRequirement" key="Filter"
						cssClass="btn" id="okbtn"
						cssStyle="position:relative; left:-546px; " />
					</td>
					<td width="9%"></td>
				</tr>
		</table>
		<s:if
			test="%{filteredRequirementList != null && filteredRequirementList.size()!=0}">
			<table width="67%">
				<display:table id="filteredRequirementList" 
					name="filteredRequirementList" defaultsort="1"
					defaultorder="descending"
					requestURI="RequirementAction_filterRequirement" class="listable2"
					cellpadding="0" cellspacing="0" pagesize="10">

					<display:column property="requiredRol.description" title="Role" 
						sortable="true" />
					<display:column property="assignmentPorcentage" title="% FTE"
						sortable="true" format="{0,number,00} %" />
					<display:column property="startDate.time" title="Start Date"
						sortable="true" format="{0,date,dd/MM/yyyy}" />
					<display:column property="endDate.time" title="End Date"
						sortable="true" format="{0,date,dd/MM/yyyy}" />
					<display:column title="Options">
						<s:if test="hasPermission(permissionNameConverter.getEditProjectRequirementPermission())" >
							<a href="${edit_action}?requirementId=${filteredRequirementList.id}&selectedProjectId=${selectedProjectId}">Edit</a>&nbsp;&nbsp;&nbsp;
						</s:if>
						<s:if test="hasPermission(permissionNameConverter.getRemoveProjectRequirementPermission())" >
							<a href="javascript:confirmDeleteReq('${remove_action}', '${filteredRequirementList.id}')">Remove</a>&nbsp;&nbsp;&nbsp;
						</s:if>
					</display:column>


						
				</display:table>
			</table>
		</s:if>
		<s:else>
			<table width="67%">
				<tr>
					<td><s:label label="No requirements to show."
						cssClass="formClass"></s:label></td>
				</tr>
			</table>
		</s:else>
		<s:if test="hasPermission(permissionNameConverter.getCreateProjectRequirementPermission())" >
			<table width="67%">
				<tr>
					<td>
						<s:submit align="right" key="New Requirement" cssClass="btn" id="okbtn"
						cssStyle="position:relative;top:-34px; width:125px; right:5px; *top:-10px; *right:5px"
						action="RequirementAction_createRequirement" />
					</td>
				</tr>
			</table>
		</s:if>
	</s:if>
</s:form>